<template>
  <a-form
    ref="formRef"
    :model="formState"
    :label-col="{ span: 8 }"
    :rules="rules"
    autoComplete="off"
    class="qiuzhiqiwang"
  >
    <a-row>
      <!-- <a-col :span="8">
        <a-form-item label="期望工作区域" name="desiredAreaCode">
          <a-select
            size="large"
            :fieldNames="{ label: 'name', value: 'code', options: 'options' }"
            :options="areaList"
            v-model:value="formState.desiredAreaCode"
            placeholder="请选择"
          >
          </a-select>
        </a-form-item>
      </a-col> -->
      <a-col :span="8">
        <a-form-item label="期望职位" name="desiredPositionCode">
          <a-tree-select
            size="large"
            :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
            v-model:value="formState.desiredPositionCode"
            placeholder="请选择"
            :tree-data="posList"
            allow-clear
            showSearch
            tree-default-expand-all
            treeNodeFilterProp="name"
          >
          </a-tree-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="期望行业" name="desiredIndustryCode">
          <a-tree-select
            size="large"
            v-model:value="formState.desiredIndustryCode"
            placeholder="请选择"
            :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
            :tree-data="industryList"
            allow-clear
            showSearch
            tree-default-expand-all
            treeNodeFilterProp="name"
          >
          </a-tree-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="期望薪资" name="salary">
          <SalaryInput v-model:value="formState.salary" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="当前求职状态" name="currentState">
          <a-select
            size="large"
            placeholder="请选择"
            :options="CURRENT_JOB_STATE_DICT"
            v-model:value="formState.currentState"
          >
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="24" class="btn-box">
        <a-form-item>
          <a-button size="large" @click="emit('close')">取消</a-button>
          <a-button size="large" type="primary" @click="onSubmit"
            >保存</a-button
          >
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { CURRENT_JOB_STATE_DICT } from '@/utils/dict';
import _ from 'lodash';
import { message } from 'ant-design-vue';
import CommonService from '@/api/common';
import { array2Tree, disabledTreeData } from '@/utils/util';
import SalaryInput from '@/views/register/components/SalaryInput.vue';
import UserService from '@/api/user';
import { emitter } from '@/hooks/useMitt';
import { step1Rules as rules } from '@/views/register/util';

const props = defineProps<{ value: any }>();
const emit = defineEmits(['finish', 'close']);
// const areaList = ref();
const posList = ref();
const industryList = ref();

const defaultFormState = {
  currentState: null,
  desiredAreaCode: null,
  desiredPositionCode: null,
  desiredIndustryCode: null,
  salary: {
    desiredSalaryMin: 10,
    desiredSalaryMax: 15,
    salaryMonth: 12,
  },
  id: null,
};

const formState = reactive(defaultFormState);
const formRef = ref();

async function selectAreaListFromRedis() {
  // try {
  //   const resp = await CommonService.selectAreaListFromRedis();
  //   if (resp.code === 200) {
  //     areaList.value = resp.data;
  //   }
  // } catch (error) {
  //   console.log(error);
  // }
}

async function selectPositionListFromRedis() {
  try {
    const resp = await CommonService.selectPositionListFromRedis();
    if (resp.code === 200) {
      posList.value = array2Tree(resp.data, '', 'code', 'parentCode');
      disabledTreeData(posList.value);
    }
  } catch (error) {
    console.log(error);
  }
}
async function selectIndustryListFromRedis() {
  try {
    const resp = await CommonService.selectIndustryListFromRedis();
    if (resp.code === 200) {
      industryList.value = array2Tree(resp.data, '0', 'code', 'parentCode');
      disabledTreeData(industryList.value);
    }
  } catch (error) {
    console.log(error);
  }
}

async function onSubmit() {
  try {
    await formRef.value?.validate();
    const params: any = {
      ...formState,
      ...formState.salary,
      desiredSalaryMin: formState.salary.desiredSalaryMin * 1000,
      desiredSalaryMax: formState.salary.desiredSalaryMax * 1000,
      salary: null,
    };
    const resp = await UserService.editPurpose(params);
    if (resp.code === 200) {
      message.success('操作成功');
      emit('finish');
      emitter.emit('RESUME_UPDATE');
    } else {
      message.error(resp?.msg || '操作失败');
    }
  } catch (error) {
    console.log(error);
  }
}

function initFormData() {
  if (props.value) {
    const value = props.value;
    (formState.currentState as any) = `${value.currentState}`;
    formState.desiredAreaCode = value.desiredAreaCode;
    formState.desiredPositionCode = value.desiredPositionCode;
    formState.desiredIndustryCode = value.desiredIndustryCode;
    formState.salary.desiredSalaryMax = value?.desiredSalaryMax / 1000;
    formState.salary.desiredSalaryMin = value?.desiredSalaryMin / 1000;
    formState.salary.salaryMonth = value?.salaryMonth;
    formState.id = value.id;
  }
}

onMounted(async () => {
  await selectAreaListFromRedis();
  await selectPositionListFromRedis();
  await selectIndustryListFromRedis();
  initFormData();
});
</script>

<style lang="less" scoped>
.qiuzhiqiwang {
  background-color: #f5f6f7;
  padding-top: 20px;
  box-sizing: border-box;
  padding-right: 20px;
  :deep {
    .ant-form-item-label {
      min-width: 78px;
    }
  }
}
</style>
